<template>
  <div :style="{ backgroundColor: '#f0f3f5' }">
    <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        :collapse="false"
        :background-color="'#f0f3f5'"
        :text-color="'#1F2329'"
        :unique-opened="true"
        :active-text-color="'#1F2329'"
        :collapse-transition="false"
        mode="vertical"
        @select="handleSelect"
      >
        <sidebar-item
          v-for="(route, index) in menus"
          :key="route.path + index"
          :item="route"
          :base-path="route.path"
        />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
  import {mapGetters, mapState} from "vuex";
  import SidebarItem from "./SidebarItem";
  import variables from "@/assets/styles/variables.scss";

  export default {
    components: {SidebarItem},
    props: {
      menus: {
        type: Array,
        default: () => []
      },
      activeMenu: {
        type: String,
        default: '0'
      }
    },
    computed: {
      ...mapState(["settings"]),
      ...mapGetters(["sidebar"]),
      variables() {
        return variables;
      }
    },
    methods: {
      handleSelect(value) {
        console.log(value)
        this.$emit('handleSelectMenu', value)
      }
    }
  };
</script>
